<template>
  <div class="blog-management">
    <div class="card">
      <div class="card-header">
        <h2>博客管理</h2>
        <div class="search-filter">
          <input type="text" placeholder="搜索博客ID或标题..." v-model="searchQuery">
          <button @click="searchBlogs"><i class="icon-search"></i></button>
        </div>
      </div>

      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>博客ID</th>
            <th>标题</th>
            <th>发布时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="blog in blogs" :key="blog.ctid">
            <td>{{ blog.ctid }}</td>
            <td>{{ blog.title }}</td>
            <td>{{ $formatDate(blog.publishTime) }}</td>
            <td>
                <span :class="['status',
                  {'pending': blog.status === 0},
                  {'approved': blog.status === 1},
                  {'rejected': blog.status === 2}
                ]">
                  {{ getStatusText(blog.status) }}
                </span>
            </td>
            <td>
              <button class="btn-view" @click="viewBlog(blog.ctid)">
                <i class="icon-eye"></i>
              </button>
              <button
                  v-if="blog.status !== 1"
                  class="btn-approve"
                  @click="approveBlog(blog.ctid)"
              >
                通过
              </button>
              <button
                  class="btn-reject"
                  @click="showRejectDialog(blog.ctid)"
              >
                驳回
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 驳回对话框 -->
      <div class="dialog-overlay" v-if="showDialog">
        <div class="dialog">
          <h3>驳回博客</h3>
          <textarea v-model="rejectReason" placeholder="请输入驳回原因..."></textarea>
          <div class="dialog-actions">
            <button class="btn-cancel" @click="cancelReject">取消</button>
            <button class="btn-confirm" @click="confirmReject">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { format } from 'date-fns';
import { ElMessage } from 'element-plus'

export default {
  name: 'BlogManagement',
  data() {
    return {
      searchQuery: '',
      blogs: [],
      showDialog: false,
      rejectReason: '',
      currentBlogId: null
    }
  },

  created() {
    this.fetchBlogs();
  },
  // 修改BlogManagement.vue中的方法
  methods: {
    getStatusText(status) {
      const statusMap = {
        0: '待审核',
        1: '已发布',
        2: '已驳回'
      };
      return statusMap[status] || '未知状态';
    },

    showRejectDialog(blogId) {
      this.currentBlogId = blogId;  // 存储当前博客ID
      this.showDialog = true;      // 显示对话框
      this.rejectReason = '';      // 清空驳回原因
    },

    async fetchBlogs(ctid = null) {
      try {
        if (ctid) {
          const response = await this.$http.get(`/admin/queryBlog/${ctid}`)
          this.blogs = response.data // 注意访问response.data
        } else {
          const response = await this.$http.get('/admin/allBlog')
          this.blogs = response.data // 注意访问response.data
        }
      } catch (error) {
        console.error('获取博客列表失败:', error)
        this.$message.error('获取博客列表失败')
      }
    },

    async approveBlog(ctid) {
      try {
        await this.$http.put(`/admin/goContent/${ctid}`)
        this.$message.success('博客审核通过')
        this.fetchBlogs()
      } catch (error) {
        console.error('审核通过失败:', error)
        this.$message.error('审核通过失败')
      }
    },

    async confirmReject() {
      if (!this.rejectReason.trim()) {
        this.$message.warning('请输入驳回原因')
        return
      }

      try {
        await this.$http.post('admin/reviewBlog', {
          ctid: this.currentBlogId,
          reason: this.rejectReason
        })
        this.$message.success('博客已驳回')
        this.showDialog = false
        this.fetchBlogs()
      } catch (error) {
        console.error('驳回博客失败:', error)
        this.$message.error('驳回博客失败')
      }
    }
  }
}
</script>

<style scoped>
.blog-management {
  padding: 20px;
}

/* 共用样式与UserManagement相同，省略部分重复代码 */

.status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
}

.status.pending {
  background-color: #ff9800;
}

.status.approved {
  background-color: #4caf50;
}

.status.rejected {
  background-color: #f44336;
}

.btn-view, .btn-approve, .btn-reject {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  margin-right: 5px;
}

.btn-view {
  background-color: #2196f3;
  color: white;
}

.btn-approve {
  background-color: #4caf50;
  color: white;
}

.btn-reject {
  background-color: #f44336;
  color: white;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background-color: white;
  border-radius: 6px;
  padding: 20px;
  width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dialog h3 {
  margin-top: 0;
  color: #455a64;
}

.dialog textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 15px 0;
  resize: vertical;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-cancel, .btn-confirm {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #607d8b;
}

.btn-confirm {
  background-color: #1976d2;
  color: white;
}
</style>